<template>
    <div id="condition2">
        <div v-for="(item,index) in conditionData" :key="item">
            <el-row  :gutter="4" >
              <div>
                <el-col style="width:150px;lign-haeight:30px;background:pink" :span="item.spanNumQ":offset="item.offsetNumQ">
                    <el-select style="line-height:30px" v-model='item.colName'>
                        <el-option  v-for="(item,index) in cols" :value="item.col" :label="item.col" :key="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="item.spanNum">
                    <el-select v-model='item.operName'>
                        <el-option v-for="(item,index) in opers" :value="item.oper" :label="item.oper" :key="item"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="item.spanNum">
                    <el-input></el-input>
                </el-col>
                <el-col :span="item.spanNum">
                    <el-select v-model='item.funName'>
                        <el-option v-for="(item,index) in funs" :value="item.fun" :label="item.fun" :key="item"></el-option>
                    </el-select>
                </el-col>
                <i @click="getRows(item)" v-show="item.ifShow" class="el-icon-circle-plus-outline"></i>
                <i @click="moveRows(index,item)" v-show="item.ifShow" class="el-icon-remove-outline"></i>
              </div>
                <el-row>
                    <el-col :offset="item.offsetNumQ" v-show="item.ifShow2">
                        <i @click="getRows2(item,index)"  class="el-icon-circle-plus-outline"></i>
                        <el-radio style="width: 40px;height: 20px">且</el-radio>
                        <el-radio style="width: 40px;height: 20px">或</el-radio>
                    </el-col>
                </el-row>
            </el-row>
            <ConditionComp :condition-data="item.children"></ConditionComp>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ConditionComp',
        props: {
            conditionData: Array
        },
        data () {
            return {
                cols: [{
                    col: '数量',
                    colName: null
                }, {
                    col: '名称',
                    colName: null
                }],
                opers: [{
                    oper: '等于',
                    operName: null
                }, {
                    oper: '包含',
                    operName: null
                }],
                funs: [{
                    fun: '求和',
                    funName: null
                }, {
                    fun: '相减',
                    funName: null
                }]
            }
        },
        methods: {
            getRows (data) {
                let a = {
                    spanNum: 4,
                    spanNumQ: 4,
                    offsetNumQ: data.offsetNumQ + 1,
                    ifShow: true,
                    ifShow2: true,
                    children: []
                }
                let b = {
                    spanNum: 4,
                    spanNumQ: 4,
                    offsetNumQ: data.offsetNumQ + 1,
                    ifShow: true,
                    ifShow2: false,
                    children: []
                }
                debugger
                data.spanNum = 0
                data.spanNumQ = 0
                data.offsetNumQ = data.offsetNumQ
                data.ifShow = false
                data.ifShow2 = false
                debugger
                data.children.push(b)
                data.children.push(a)
                console.log(this.conditionData)
            },
            getRows2 (data, index) {
                let c = {
                    spanNum: 4,
                    spanNumQ: 4,
                    offsetNumQ: data.offsetNumQ,
                    ifShow: true,
                    ifShow2: true,
                    children: []
                }

                debugger
                this.conditionData.findIndex((item1, ind) => {
                    debugger
                    // console.log()
                    if (ind == index) {
                        debugger
                        console.log(item1)
                        item1.ifShow2 = false
                        debugger
                    }
                })
                this.conditionData.push(c)
            },
            moveRows (index, item) {
               this.conditionData.splice(index, 1)
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
#condition2
    margin-top 10px
    .el-row {
        margin-bottom: 5px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
